import React from 'react';
import { Card } from 'antd';
import { Pie } from '@ant-design/charts';

interface GenderData {
    type: string;
    value: number;
}

interface GenderRatioChartProps {
    loading: boolean;
    data: GenderData[];
}

const GenderRatioChart: React.FC<GenderRatioChartProps> = ({ loading, data }) => {
    console.log('Gender data:', data);
    const pieConfig = {
        data,
        angleField: 'value',
        colorField: 'type',

        label: {
            text: 'value',
            style: {
                fontWeight: 'bold',
            },
        },
        legend: {
            color: {
                title: false,
                position: 'right',
                rowPadding: 5,
            },
        },
        scale: {
            color: {
                range: ['#f57ba1','#0ee1f9']
            }
        }
    };

    // 确保在渲染前数据格式正确
    if (!loading && data.length > 0) {
        console.log('Processed gender data:', data);
    }

    return (
        <Card
            title="学生男女比例"
            loading={loading}
        >
            {!loading && data.length > 0 ? (
                <div style={{ height: 300 }}>
                    <Pie {...pieConfig} />
                </div>
            ) : (
                <div style={{ height: 300, display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
                    {loading ? '加载中...' : '暂无数据'}
                </div>
            )}
        </Card>
    );
};

export default GenderRatioChart;